<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true" color="#fff">
      <template #title><text style="color: #fff">会员开通查询</text></template>
    </GlobalTopBar>
    <view class="page_content">
      <template v-if="!text">
        <image
          class="cz_img"
          :src="`${store.imgDomain}cz_1.png`"
          mode="widthFix"
        />
        <view class="djs">{{ nums }}</view>
        <view class="td">查询支付中，请稍候... ...</view>
      </template>
      <template v-else-if="text === 1">
        <view class="flex_center" style="flex-direction: column">
          <uni-icons
            type="checkbox-filled"
            size="100"
            color="#3692FF"
          ></uni-icons>
          <!-- <uni-icons type="clear" size="100" color="#FF0000"></uni-icons> -->
          <text style="font-size: 30rpx">开通成功</text>
          <!-- <text>下单失败，请联系客服处理</text> -->
          <view class="btns flex_center">
            <view
              class="fhsy"
              @click="
                uni.redirectTo({
                  url: '/pages/home/index',
                })
              "
              >返回首页</view
            >
            <view
              class="ckdd"
              @click="
                uni.redirectTo({
                  url: '/pages/my/index',
                })
              "
              >查看会员</view
            >
          </view>
        </view>
      </template>
      <template v-else-if="text === 2 || !nums">
        <view class="flex_center" style="flex-direction: column">
          <uni-icons type="clear" size="100" color="#FF0000"></uni-icons>
          <text style="font-size: 30rpx">开通失败，请联系客服处理</text>
          <view class="btns flex_center">
            <view
              class="fhsy"
              @click="
                uni.redirectTo({
                  url: '/pages/home/index',
                })
              "
              >返回首页</view
            >
            <view
              class="ckdd"
              @click="
                uni.redirectTo({
                  url: '/pages/my/index',
                })
              "
              >查看会员</view
            >
          </view>
        </view>
      </template>
      <!-- <view class="djs" v-else style="color: #fd2a53">查询失败</view> -->
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { validatePhone } from '@/utils/validate';

const store = useCounterStore();
// 列表数据相关
const listData = ref([]);
const nums = ref(30);
const text = ref(0);
const timer = ref();

// 查询充值卡购买订单支付状态
const zfcallbackFun = async (option) => {
  try {
    await request('wxapp/user/checkUserLevelOrderIsPay', {
      tid: option.tid,
    });
    clearInterval(timer.value);
    text.value = 1;
    store.doLogin();
  } catch {
    if (nums.value != 0) {
      zfcallbackFun(option);
    }
  }
};

onLoad((option) => {
  if (!option.tid) return;

  setTimeout(() => {
    zfcallbackFun(option);
    timer.value = setInterval(() => {
      nums.value--;
      console.log(nums.value);
      if (!nums.value) {
        text.value = 2;
        clearInterval(timer.value);
      }
    }, 1000);
  }, 1000);
});
</script>

<style lang="scss" scoped>
.topbars {
  background: linear-gradient(to right, #2f80ff, #3184ff);
}
.page_content {
  box-sizing: border-box;
  position: relative;
  padding: 200rpx 20rpx 20rpx;
  text-align: center;
  .djs {
    font-size: 50rpx;
    color: #06ca64;
  }
  .td {
    font-size: 30rpx;
  }
  .cz_img {
    display: block;
    width: 180rpx;
    margin: 0 auto 20rpx;
  }
}
.btns {
  margin-top: 20rpx;
  flex-direction: row;
}
.fhsy {
  border: 1rpx solid #999;
  line-height: 70rpx;
  font-size: 30rpx;
  border-radius: 35rpx;
  margin-right: 20rpx;
  padding: 0 70rpx;
}
.ckdd {
  line-height: 70rpx;
  font-size: 30rpx;
  border-radius: 35rpx;
  padding: 0 70rpx;
  color: #fff;
  background-color: #3692ff;
  border: 1rpx solid #3692ff;
}
</style>
